<template>
	<div class="treeListContent">
		<el-tree :data="treeList" :props="defaultProps" :default-expand-all="true" @node-click="handleNode">
			<span slot-scope="{ node, data }">
				<i v-if="data.parentGroupId == '0'" class="wj-icon-24gf-folderOpen"></i>
				<i v-else-if="data.parentGroupId != '0' && data.children.length > 0" class="wj-icon-wenjian"></i>
				<i v-else-if="data.parentGroupId != '0' && data.children.length == 0" class="wj-icon-gaosu countryColor"></i>
				<i v-else-if="data.parentGroupId != '0' && data.children.length < 0" class="wj-icon-gaosu provincialColor"></i>
				<span style="margin-left: 10px">{{ node.label }}</span>
			</span>
		</el-tree>
	</div>
</template>
<script>
export default {
	name: "TreeList",
	props: {
		list: {
			type: Array,
			default: () => [],
		},
		cocnfig: {
			type: Object,
			default: () => {},
		},
		handleNode: {
			type: Function,
			default: () => {},
		},
	},
	data() {
		return {
			// 树形组件列表
			treeList: this.list,
			// 树形组件配置
			defaultProps: this.cocnfig,
		};
	},
	created() {},
	mounted() {},
	methods: {},
};
</script>
<style lang="less" scoped>
.treeListContent {
	width: 106%;
	height: 100%;
	overflow-y: scroll;
	.countryColor {
		color: #0196ff;
	}
	.provincialColor {
		color: #ef8f52;
	}

	/deep/ .el-tree {
		width: 100%;
		height: 100%;
	}
}
</style>
